import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, Button,InputItem,TextareaItem,ImagePicker } from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from './activityentry.less'



const Item = List.Item;
const Brief = Item.Brief;
class activityentry extends React.Component{
  constructor(props){
    super(props);
    this.state={
      files: [],
    }
  }
  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  }


  render(){
    const { getFieldProps } = this.props.form;
    const { files } = this.state;
    return(
      <div>
        <div style={{height:'1rem',position:'relative'}}>
          <span className={styles.tou1}>活动基本信息</span>
        </div>
        <List>
          <InputItem
            {...getFieldProps('autofocus')}
            clear
            placeholder="请输入活动标题"
          >活动标题</InputItem>
          <InputItem
            {...getFieldProps('autofocus')}
            clear
            placeholder="请输入活动地点"
          >活动地点</InputItem>
        </List>
<WhiteSpace/>
        <List>
          <InputItem
            {...getFieldProps('autofocus')}
            clear
            placeholder="请输入主持人姓名"
          >主持人</InputItem>
          <Item extra="请选择活动日期" arrow="horizontal" onClick={() => {}}>活动日期</Item>
          <Item extra="请选择活动时间" arrow="horizontal" onClick={() => {}}>活动时间</Item>

        </List>
<div style={{height:'0.8rem',position:'relative'}}><span className={styles.tou1}>活动类型人员</span></div>
        <List>
          <Item extra="请选择活动类型" arrow="horizontal" onClick={() => {}}>活动类型</Item>
          <Item extra="请选择人员类型" arrow="horizontal" onClick={() => {}}>人员类型</Item>

        </List>
        <List>
          <InputItem
            {...getFieldProps('autofocus')}
            clear
            placeholder="请输入列席人员，用逗号隔开"
          >列席人员</InputItem>

          <Item extra="请选择领导干部" arrow="horizontal" onClick={() => {}}>领导干部</Item>
          <Item extra="请选择缺席人员" arrow="horizontal" onClick={() => {}}>缺席人员</Item>

        </List>
        <div style={{height:'0.8rem',position:'relative'}}><span className={styles.tou1}>活动详情附件</span></div>
        <List>
          <TextareaItem
            {...getFieldProps('note1')}
            rows={5}
            placeholder="请填写活动详情，例如主要议程和会议记录"
          />
        </List>
        <WhiteSpace/>
        <List>
          <ImagePicker
            files={files}
            onChange={this.onChange}
            onImageClick={(index, fs) => console.log(index, fs)}
            selectable={files.length < 9}
          />
        </List>
        <WhiteSpace/>
        <WhiteSpace/>
        <div style={{width:'100%'}}><Button style={{width:'80%',marginLeft:'10%',backgroundColor:'#ff2c2c',color:'#ffffff'}}>保存</Button></div>
      </div>
    )
  }
}

function mapStateToProps({ infor }){
  return {
    infor
  };
}

const activityentryx = createForm()(activityentry);

export default connect(mapStateToProps)(activityentryx);
